<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>研学导览 - 生物城水世界科技环保研学基地</title>
    
    <!-- Bootstrap CSS (BootCDN 国内镜像) -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons (BootCDN 国内镜像) -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">
    <!-- AOS Animation (BootCDN 国内镜像) -->
    <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.1/aos.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    <!-- 🧭 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="bi bi-droplet-fill text-primary"></i>
                生物城水世界
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="guide.html">研学导览</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="knowledge.html">知识库</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="experiment.html">实验园地</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 🗺️ 研学导览主内容 -->
    <main class="pt-5 mt-5">
        <!-- 📍 页面标题 -->
        <section class="py-5 bg-water-light">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto text-center" data-aos="fade-up">
                        <h1 class="display-4 text-primary-gradient mb-3">🗺️ 研学导览</h1>
                        <p class="lead text-muted">
                            跟随我们的脚步，探索水世界的奥秘，了解污水处理的神奇过程！
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 🎯 研学路线总览 -->
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-12" data-aos="fade-up" data-aos-delay="100">
                        <h2 class="text-center mb-5">🎯 研学路线总览</h2>
                        <div class="row g-4">
                            <div class="col-md-3">
                                <div class="card text-center border-0 shadow-custom h-100">
                                    <div class="card-body p-4">
                                        <div class="display-4 text-primary mb-3">1️⃣</div>
                                        <h5 class="card-title">入口大厅</h5>
                                        <p class="card-text text-muted">集合签到，领取研学手册</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card text-center border-0 shadow-custom h-100">
                                    <div class="card-body p-4">
                                        <div class="display-4 text-info mb-3">2️⃣</div>
                                        <h5 class="card-title">科普展厅</h5>
                                        <p class="card-text text-muted">了解水资源现状和环保知识</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card text-center border-0 shadow-custom h-100">
                                    <div class="card-body p-4">
                                        <div class="display-4 text-success mb-3">3️⃣</div>
                                        <h5 class="card-title">处理车间</h5>
                                        <p class="card-text text-muted">参观污水处理全过程</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card text-center border-0 shadow-custom h-100">
                                    <div class="card-body p-4">
                                        <div class="display-4 text-warning mb-3">4️⃣</div>
                                        <h5 class="card-title">实验区域</h5>
                                        <p class="card-text text-muted">动手实验，验证科学原理</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 🗺️ 交互式地图 -->
        <section class="py-5 bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-12" data-aos="fade-up" data-aos-delay="200">
                        <h2 class="text-center mb-5">🗺️ 交互式地图</h2>
                        <div class="interactive-map" style="min-height: 500px;">
                            <!-- 地图背景 -->
                            <div class="position-relative h-100">
                                <img src="https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=Water%20treatment%20plant%20layout%20with%20buildings%2C%20pipes%2C%20and%20green%20areas%2C%20cartoon%20style%2C%20educational%20illustration%2C%20bright%20colors%2C%20child-friendly%20design&image_size=landscape_4_3" 
                                     alt="水厂布局图" class="img-fluid rounded" style="width: 100%; max-height: 400px; object-fit: cover;">
                                
                                <!-- 地图标注点 -->
                                <div class="map-point" style="top: 20%; left: 15%;" data-location="entrance" title="入口大厅">
                                    <i class="bi bi-door-open"></i>
                                </div>
                                <div class="map-point" style="top: 30%; left: 35%;" data-location="exhibition" title="科普展厅">
                                    <i class="bi bi-info-circle"></i>
                                </div>
                                <div class="map-point" style="top: 50%; left: 60%;" data-location="treatment" title="处理车间">
                                    <i class="bi bi-gear"></i>
                                </div>
                                <div class="map-point" style="top: 70%; left: 80%;" data-location="laboratory" title="实验区域">
                                    <i class="bi bi-flask"></i>
                                </div>
                                <div class="map-point" style="top: 40%; left: 20%;" data-location="greentank" title="绿化储水池">
                                    <i class="bi bi-tree"></i>
                                </div>
                                <div class="map-point" style="top: 60%; left: 45%;" data-location="outlet" title="出水口">
                                    <i class="bi bi-water"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 📍 详细站点介绍 -->
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-12" data-aos="fade-up" data-aos-delay="300">
                        <h2 class="text-center mb-5">📍 详细站点介绍</h2>
                        
                        <!-- 入口大厅 -->
                        <div class="card mb-4 border-0 shadow-custom" id="location-entrance">
                            <div class="row g-0">
                                <div class="col-md-4">
                                    <img src="https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=Modern%20entrance%20hall%20of%20water%20treatment%20plant%2C%20bright%20and%20welcoming%2C%20educational%20posters%20on%20walls%2C%20cartoon%20style%2C%20child-friendly&image_size=landscape_4_3" 
                                         class="img-fluid rounded-start h-100" alt="入口大厅" style="object-fit: cover;">
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body p-4">
                                        <h4 class="card-title text-primary">
                                            <i class="bi bi-door-open me-2"></i>入口大厅
                                        </h4>
                                        <h6 class="text-muted mb-3">研学起点站</h6>
                                        <p class="card-text">
                                            这里是研学的第一站，同学们将在这里集合签到，领取研学手册和安全装备。大厅内设有欢迎展板，介绍今天的研学主题和注意事项。
                                        </p>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <h6>📋 活动内容：</h6>
                                                <ul class="list-unstyled">
                                                    <li><i class="bi bi-check-circle text-success me-2"></i>集合签到</li>
                                                    <li><i class="bi bi-check-circle text-success me-2"></i>发放研学手册</li>
                                                    <li><i class="bi bi-check-circle text-success me-2"></i>安全教育</li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-6">
                                                <h6>⏰ 停留时间：</h6>
                                                <p class="text-muted">约15分钟</p>
                                                <h6>👥 容纳人数：</h6>
                                                <p class="text-muted">50人</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 科普展厅 -->
                        <div class="card mb-4 border-0 shadow-custom" id="location-exhibition">
                            <div class="row g-0">
                                <div class="col-md-8">
                                    <div class="card-body p-4">
                                        <h4 class="card-title text-info">
                                            <i class="bi bi-info-circle me-2"></i>科普展厅
                                        </h4>
                                        <h6 class="text-muted mb-3">知识加油站</h6>
                                        <p class="card-text">
                                            通过互动展板和多媒体设备，了解全球水资源现状、水循环过程、污水处理的重要性等基础知识。展厅设有触摸屏和模型展示。
                                        </p>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <h6>📚 展示内容：</h6>
                                                <ul class="list-unstyled">
                                                    <li><i class="bi bi-droplet text-info me-2"></i>水循环过程</li>
                                                    <li><i class="bi bi-globe text-info me-2"></i>全球水资源</li>
                                                    <li><i class="bi bi-recycle text-info me-2"></i>污水处理意义</li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-6">
                                                <h6>🎯 互动体验：</h6>
                                                <ul class="list-unstyled">
                                                    <li><i class="bi bi-hand-index text-primary me-2"></i>触摸屏问答</li>
                                                    <li><i class="bi bi-eye text-primary me-2"></i>模型观察</li>
                                                    <li><i class="bi bi-camera text-primary me-2"></i>拍照打卡</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <img src="https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=Educational%20exhibition%20hall%20with%20interactive%20displays%2C%20touch%20screens%2C%20water%20cycle%20models%2C%20bright%20and%20colorful%2C%20child-friendly%20design&image_size=landscape_4_3" 
                                         class="img-fluid rounded-end h-100" alt="科普展厅" style="object-fit: cover;">
                                </div>
                            </div>
                        </div>

                        <!-- 处理车间 -->
                        <div class="card mb-4 border-0 shadow-custom" id="location-treatment">
                            <div class="row g-0">
                                <div class="col-md-4">
                                    <img src="https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=Water%20treatment%20facility%20with%20large%20tanks%2C%20pipes%2C%20and%20equipment%2C%20clean%20and%20modern%2C%20educational%20tour%20setting%2C%20safety%20rails%2C%20child-friendly%20perspective&image_size=landscape_4_3" 
                                         class="img-fluid rounded-start h-100" alt="处理车间" style="object-fit: cover;">
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body p-4">
                                        <h4 class="card-title text-success">
                                            <i class="bi bi-gear me-2"></i>处理车间
                                        </h4>
                                        <h6 class="text-muted mb-3">污水处理核心</h6>
                                        <p class="card-text">
                                            参观污水处理的全过程，从进水口到出水口，了解每个处理环节的作用。通过透明观察窗和安全通道，近距离观察处理设备。
                                        </p>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <h6>⚙️ 处理流程：</h6>
                                                <ul class="list-unstyled">
                                                    <li><i class="bi bi-arrow-right text-success me-2"></i>粗格栅过滤</li>
                                                    <li><i class="bi bi-arrow-right text-success me-2"></i>细格栅过滤</li>
                                                    <li><i class="bi bi-arrow-right text-success me-2"></i>沉砂池沉淀</li>
                                                    <li><i class="bi bi-arrow-right text-success me-2"></i>生物处理</li>
                                                    <li><i class="bi bi-arrow-right text-success me-2"></i>二次沉淀</li>
                                                    <li><i class="bi bi-arrow-right text-success me-2"></i>消毒处理</li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-6">
                                                <h6>🔍 观察要点：</h6>
                                                <ul class="list-unstyled">
                                                    <li><i class="bi bi-search text-warning me-2"></i>水质变化</li>
                                                    <li><i class="bi bi-search text-warning me-2"></i>设备运转</li>
                                                    <li><i class="bi bi-search text-warning me-2"></i>处理效果</li>
                                                </ul>
                                                <div class="alert alert-warning">
                                                    <i class="bi bi-exclamation-triangle me-2"></i>
                                                    <strong>安全提醒：</strong>请听从工作人员指挥，不要触摸设备。
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 实验区域 -->
                        <div class="card mb-4 border-0 shadow-custom" id="location-laboratory">
                            <div class="row g-0">
                                <div class="col-md-8">
                                    <div class="card-body p-4">
                                        <h4 class="card-title text-warning">
                                            <i class="bi bi-flask me-2"></i>实验区域
                                        </h4>
                                        <h6 class="text-muted mb-3">动手实践站</h6>
                                        <p class="card-text">
                                            在安全的实验环境中，通过简单的科学实验验证污水处理原理。配备实验台、水槽、显微镜等设备，让同学们亲手操作。
                                        </p>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <h6>🧪 实验项目：</h6>
                                                <ul class="list-unstyled">
                                                    <li><i class="bi bi-check text-success me-2"></i>水质检测实验</li>
                                                    <li><i class="bi bi-check text-success me-2"></i>过滤效果对比</li>
                                                    <li><i class="bi bi-check text-success me-2"></i>显微镜观察</li>
                                                    <li><i class="bi bi-check text-success me-2"></i>pH值测试</li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-6">
                                                <h6>🎯 学习目标：</h6>
                                                <ul class="list-unstyled">
                                                    <li><i class="bi bi-target text-primary me-2"></i>理解科学原理</li>
                                                    <li><i class="bi bi-target text-primary me-2"></i>培养实验技能</li>
                                                    <li><i class="bi bi-target text-primary me-2"></i>增强环保意识</li>
                                                </ul>
                                                <div class="alert alert-info">
                                                    <i class="bi bi-info-circle me-2"></i>
                                                    <strong>温馨提示：</strong>实验过程中请注意安全，听从老师指导。
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <img src="https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=Educational%20laboratory%20with%20students%20doing%20experiments%2C%20microscopes%2C%20test%20tubes%2C%20water%20testing%20equipment%2C%20bright%20and%20safe%20environment%2C%20child-friendly%20setting&image_size=landscape_4_3" 
                                         class="img-fluid rounded-end h-100" alt="实验区域" style="object-fit: cover;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ⏰ 时间安排 -->
        <section class="py-5 bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 mx-auto" data-aos="fade-up" data-aos-delay="400">
                        <h2 class="text-center mb-5">⏰ 时间安排</h2>
                        <div class="timeline">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                                    <strong>09:00</strong>
                                                </div>
                                                <h5 class="mb-0">集合签到</h5>
                                            </div>
                                            <p class="text-muted mb-0">入口大厅集合，发放研学手册</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                                    <strong>09:15</strong>
                                                </div>
                                                <h5 class="mb-0">科普展厅</h5>
                                            </div>
                                            <p class="text-muted mb-0">参观科普展厅，学习基础知识</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                                    <strong>10:00</strong>
                                                </div>
                                                <h5 class="mb-0">处理车间</h5>
                                            </div>
                                            <p class="text-muted mb-0">参观污水处理全过程</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                                    <strong>11:00</strong>
                                                </div>
                                                <h5 class="mb-0">实验区域</h5>
                                            </div>
                                            <p class="text-muted mb-0">动手实验，验证科学原理</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                                    <strong>11:45</strong>
                                                </div>
                                                <h5 class="mb-0">总结分享</h5>
                                            </div>
                                            <p class="text-muted mb-0">分享学习心得，合影留念</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="bg-dark text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                                    <strong>12:00</strong>
                                                </div>
                                                <h5 class="mb-0">活动结束</h5>
                                            </div>
                                            <p class="text-muted mb-0">返回学校，完成研学之旅</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ⚠️ 安全须知 -->
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto" data-aos="fade-up" data-aos-delay="500">
                        <div class="card border-0 shadow-custom bg-warning bg-opacity-10">
                            <div class="card-body p-5">
                                <h2 class="text-center mb-4 text-warning">
                                    <i class="bi bi-exclamation-triangle me-2"></i>安全须知
                                </h2>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h5 class="text-danger mb-3">
                                            <i class="bi bi-x-circle me-2"></i>禁止事项
                                        </h5>
                                        <ul class="list-unstyled">
                                            <li class="mb-2"><i class="bi bi-dash-circle text-danger me-2"></i>禁止触摸设备</li>
                                            <li class="mb-2"><i class="bi bi-dash-circle text-danger me-2"></i>禁止翻越护栏</li>
                                            <li class="mb-2"><i class="bi bi-dash-circle text-danger me-2"></i>禁止奔跑打闹</li>
                                            <li class="mb-2"><i class="bi bi-dash-circle text-danger me-2"></i>禁止乱扔垃圾</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h5 class="text-success mb-3">
                                            <i class="bi bi-check-circle me-2"></i>注意事项
                                        </h5>
                                        <ul class="list-unstyled">
                                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>听从老师指挥</li>
                                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>保持队伍整齐</li>
                                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>认真观察记录</li>
                                            <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>积极参与互动</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="alert alert-warning mt-4">
                                    <i class="bi bi-info-circle me-2"></i>
                                    <strong>紧急联系：</strong>如有任何紧急情况，请立即联系带队老师或现场工作人员。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 🦶 页脚 -->
    <footer class="bg-dark text-light py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <h5><i class="bi bi-droplet-fill text-primary me-2"></i>生物城水世界</h5>
                    <p class="text-muted">让每一滴水都变得有价值，培养环保意识从娃娃抓起。</p>
                </div>
                <div class="col-lg-4 mb-4">
                    <h6>快速链接</h6>
                    <ul class="list-unstyled">
                        <li><a href="index.html" class="text-light text-decoration-none">首页</a></li>
                        <li><a href="guide.html" class="text-light text-decoration-none">研学导览</a></li>
                        <li><a href="knowledge.html" class="text-light text-decoration-none">知识库</a></li>
                        <li><a href="experiment.html" class="text-light text-decoration-none">实验园地</a></li>
                    </ul>
                </div>
                <div class="col-lg-4 mb-4">
                    <h6>联系我们</h6>
                    <p class="text-muted mb-1"><i class="bi bi-geo-alt me-2"></i>成都市双流区生物城</p>
                    <p class="text-muted mb-1"><i class="bi bi-telephone me-2"></i>028-88888888</p>
                    <p class="text-muted"><i class="bi bi-envelope me-2"></i>info@biowater.com</p>
                </div>
            </div>
            <hr class="my-4">
            <div class="text-center">
                <p class="text-muted mb-0">&copy; 2024 生物城水世界科技环保研学基地. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS (BootCDN 国内镜像) -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <!-- AOS Animation (BootCDN 国内镜像) -->
    <script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.1/aos.js"></script>
    <!-- Custom JS -->
    <script src="js/main.js"></script>

    <script>
        // 初始化AOS动画
        AOS.init({
            duration: 800,
            once: true,
            offset: 100
        });

        // 地图交互功能
        document.addEventListener('DOMContentLoaded', function() {
            const mapPoints = document.querySelectorAll('.map-point');
            const locationCards = document.querySelectorAll('[id^="location-"]');
            
            // 地图点击事件
            mapPoints.forEach(point => {
                point.addEventListener('click', function() {
                    const location = this.getAttribute('data-location');
                    
                    // 移除所有活跃状态
                    mapPoints.forEach(p => p.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 滚动到对应卡片
                    const targetCard = document.getElementById(`location-${location}`);
                    if (targetCard) {
                        targetCard.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                        
                        // 高亮显示
                        targetCard.style.animation = 'pulse 1s ease-in-out';
                        setTimeout(() => {
                            targetCard.style.animation = '';
                        }, 1000);
                    }
                });
                
                // 鼠标悬停效果
                point.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.3)';
                });
                
                point.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                });
            });
            
            // 卡片滚动时高亮对应地图点
            window.addEventListener('scroll', function() {
                locationCards.forEach(card => {
                    const rect = card.getBoundingClientRect();
                    const locationId = card.id.replace('location-', '');
                    const correspondingPoint = document.querySelector(`[data-location="${locationId}"]`);
                    
                    if (rect.top < window.innerHeight / 2 && rect.bottom > window.innerHeight / 2) {
                        mapPoints.forEach(p => p.classList.remove('active'));
                        if (correspondingPoint) {
                            correspondingPoint.classList.add('active');
                        }
                    }
                });
            });
            
            // 平滑滚动到锚点
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>